<template>
	<view class="user-detail-wrap">
		<view class="index-top-box" :class="{'is-my-comment-page': pageType === 2}"
			:style="{'padding-top':topNavBarFixHeight+'px'}">
			<view class="return-icon" @tap="returnToPrePage">
				<image class="return-icon-img" src="../../static/leftArrowIconWhite.png"></image>
			</view>
			<text class="page-title" v-if="pageType === 2">我的点评</text>
		</view>
		<view class="fill-shim" :style="{'padding-top':topNavBarFixHeight+'px'}"></view>

		<view class="user-msg" :class="{'is-my-comment-page': pageType === 2}">
			<tetx class="user-nickname">{{userDetail.nickName}}</tetx>
			<image class="user-avatar" :src="getImgUrl(userDetail.avatar)" @tap="toEditUserMsg"></image>
			<view class="add-comment-btn" v-if="pageType === 2">
				<image class="add-icon" src="../../static/addIconBlue.png" @tap="toAddCommet"></image>
			</view>
		</view>

		<view class="comment-list">
			<commentItem :canJumpToUserDetail="false" @commentClk="commentItemClk(item,index)" v-for="(item,index) in evaluatelist"
				:key="item.id" :commentDataOrigin="item"></commentItem>
		</view>
		
		<view class="more-tips">
			<text v-show="loadingMoreTipsShow">更多加载中...</text>
			<text v-show="noMoreTipsShow">没有更多啦~</text>
			<text v-show="noDataTipsShow">暂无评论信息</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topNavBarFixHeight: 0,
				pageType: 1,
				loadingMoreTipsShow: false,
				noMoreTipsShow: false,
				noDataTipsShow: false,
				evaluatelist: [],
				pageNo:1,
				pageSize: 5,
				
				userDetail:{}
			}
		},
		onLoad(options) {
			this.pageType = options.type * 1 || 1 // 1:其他用户的评论列表 2：我的评论列表
			this.userId = options.id || this.$store.state.userInfo.id
			this.getUserDetail()
		},
		onShow() {
			if(this.clickCommentObj){
				// 局部刷新列表
				this.getEvaluateItemById(this.clickCommentObj)
			}else{
			   this.initGetList()
			}
			this.getUserDetail()
		},
		onPullDownRefresh() {
			this.initGetList()
		},
		onReachBottom() {
			if (this.noMoreTipsShow || this.loadingMoreTipsShow) return
			this.loadingMoreTipsShow = true
			this.getEvaluatelist().then((res) => {
				this.loadingMoreTipsShow = false
				if (res.rows && res.rows.length) {
					this.evaluatelist = [...this.evaluatelist, ...res.rows]
				} else {
					this.noMoreTipsShow = true
				}
			})
		},
		created() {
			this.topNavBarFixHeight = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			initGetList() {
				this.pageNo = 1
				this.noMoreTipsShow = false
				this.noDataTipsShow = false
				this.loadingMoreTipsShow = false
				uni.showLoading({
					mask: true
				});
				this.getEvaluatelist().then((res) => {
					if (!res.rows || res.rows.length === 0) {
						this.noDataTipsShow = true
					} else if (res.rows.length < this.pageSize) {
						this.noMoreTipsShow = true
					}
					this.evaluatelist = res.rows
					uni.hideLoading()
					uni.stopPullDownRefresh()
				})
			},
			returnToPrePage() {
				uni.navigateBack({
					delta: 1
				});
			},
			commentItemClk(data,index) {
				this.clickCommentObj = { id:data.id, index }
				uni.navigateTo({
					url: `/pages/commentDetail/index?id=${data.id}`
				})
			},
			toEditUserMsg() {
				if (this.pageType !== 2) {
					// 不是在我的评论列表页
					return
				}
				this.$store.commit('setTempIdentityDesc','')
				uni.navigateTo({
					url: '/pages/userDetail/editUserMsg'
				})
			},
			toAddCommet() {
				this.$store.commit('resetNewEvaluate')
				// uni.navigateTo({
				// 	url: '/pages/userDetail/addComment'
				// })
				uni.navigateTo({
					url: '/pages/userDetail/selectCommentTarget?type=1'
				})
			},
			
			getEvaluatelist() {
				return this.$api.getEvaluatelistById({
					userId: this.userId,
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}).then((res) => {
					this.pageNo++
					return res
				})
			},
			getEvaluateItemById({id,index}){
				this.$api.getEvaluateDetail(id).then((res)=>{
					this.evaluatelist.splice(index,1,res)
					this.clickCommentObj = null
				})
			},
			getUserDetail(){
				this.$api.getUserInfoById(this.userId).then(res=>{
					this.userDetail = res
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #F3F7FD;
	}
</style>
<style lang="less" scoped>
	.user-detail-wrap {
		// padding-bottom: 40rpx;
	}

	.index-top-box {
		width: 750rpx;
		height: 130rpx;
		box-sizing: border-box;
		background-color: #333;

		&.is-my-comment-page {
			background-color: #3399FF;
		}

		display: flex;
		align-items: center;

		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		padding: 0 56rpx;

		.return-icon {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.return-icon-img {
				width: 56rpx;
				height: 56rpx;
			}
		}

		.page-title {
			flex: 1;
			text-align: center;
			padding-right: 70rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 50rpx;
		}

	}

	.fill-shim {
		box-sizing: border-box;
		height: 130rpx;
	}

	.user-msg {
		position: relative;
		width: 750rpx;
		height: 130rpx;
		box-sizing: border-box;
		background-color: #333;

		&.is-my-comment-page {
			background-color: #3399FF;
		}

		.user-nickname {
			position: absolute;
			right: 224rpx;
			bottom: 20rpx;

			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 44rpx;
		}

		.user-avatar {
			position: absolute;
			right: 74rpx;
			bottom: -34rpx;
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
		}

		.add-comment-btn {
			position: absolute;
			left: 74rpx;
			bottom:-34rpx;
			width: 80rpx;
			height: 80rpx;
			box-shadow: 0px 4rpx 8rpx 0px rgba(218, 227, 248, 0.5);
			border-radius: 50%;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;

			.add-icon {
				width: 70rpx;
				height: 70rpx;
			}
		}
	}

	.comment-list {
		width: 690rpx;
		margin: 0 auto;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.more-tips {
		height: 80rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #aaa;
	}
</style>
